<template>
  <div id="user-box" class="shadow">
    <!-- 已登录 -->

    <div id="user-info" v-if="hasLogin">
      <svg
        class="icon"
        aria-hidden="true"
        style="font-size: 40px; display: inline; margin-right: 20px"
      >
        <use xlink:href="#icon-_bianjie_feiji"></use>
      </svg>

      <div class="hollow">航班预定</div>
      <svg
        class="icon"
        aria-hidden="true"
        style="font-size: 40px; display: inline"
      >
        <use xlink:href="#icon-feijizhong"></use>
      </svg>

      <span @click="showFlight">查看航程</span>

      <a-avatar style="background-color: #87d068; margin-right: 8px">
        <template #icon>
          <UserOutlined />
        </template>
      </a-avatar>
      <a-dropdown placement="bottomRight">
        <a class="ant-dropdown-link" @click.prevent>
          <span id="user-text"
            ><span id="user-name">{{ userInfo.nickname }}</span> <DownOutlined
          /></span>
        </a>
        <template #overlay>
          <a-menu>
            <a-menu-item>
              <a
                v-if="isAdmin"
                href="javascript:;"
                @click="redirectAdmin"
                style="color: red"
                >管理面板</a
              >
            </a-menu-item>
            <a-menu-item>
              <a href="javascript:;" @click="logout">退出登录</a>
            </a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>

      <a-drawer
        :width="500"
        title="飞机票详情"
        :open="openTicketInfo"
        @close="openTicketInfo = false"
        :loading="true"
      >
        <div
          v-if="loadingTicket"
          style="
            height: 100%;
            text-align: center;
            background: rgba(0, 0, 0, 0.05);
          "
        >
          <a-spin style="margin-top: 85%" size="large" />
        </div>
        <div v-else style="height: 100%; width: 100%">
          <TicketViewer
            @refund="refund"
            v-if="ticketInfo != null"
            :ticketInfo="ticketInfo"
            :key="ticketInfo.flightInfo.number"
          ></TicketViewer>
          <a-empty
            v-else
            description="您还没买飞机票"
            style="margin-top: 70%"
          />
        </div>
      </a-drawer>
    </div>

    <!-- 未登录 -->
    <a-button
      id="not-login"
      type="primary"
      :icon="h(LoginOutlined)"
      @click="redirectLogin"
      v-else
      >登录/注册</a-button
    >
  </div>
</template>

<script lang="ts" setup>
// import "zui/css";
import {
  UserOutlined,
  DownOutlined,
  LoginOutlined,
} from "@ant-design/icons-vue";
import { computed, h, ref } from "vue";
import { useLoginStore } from "../store/loginStore";
import { useRouter } from "vue-router";
import type { UserInfo } from "../store/loginStore";
import { message } from "ant-design-vue";
import { HTTP_STATUS } from "../api/request";
import { getTicketInfoApi, TicketInfo } from "../api/ticketApi";
import TicketViewer from "./TicketViewer.vue";

const router = useRouter();

const loginStore = useLoginStore();

const hasLogin = computed<boolean>((): boolean => {
  return loginStore.isAuthenticated();
});

const userInfo = computed<UserInfo>((): UserInfo => {
  return loginStore.$state.userInfo!;
});

const openTicketInfo = ref<boolean>(false);
const loadingTicket = ref<boolean>(false);

const ticketInfo = ref<TicketInfo | null>(null);

function redirectAdmin() {
  router.push("/admin");
}

function redirectLogin() {
  router.push("/login");
}

function refund() {
  openTicketInfo.value = false;
  ticketInfo.value = null;
}

const isAdmin = computed(() => {
  return loginStore.$state.roles.includes("admin");
});

function logout() {
  setTimeout(async () => {
    const res = await loginStore.requestLogout();
    if (res.status === HTTP_STATUS.SUCCESS) {
      message.success("成功退出登录");
      redirectLogin();
    } else {
      message.error(res.msg);
    }
  });
}

function showFlight() {
  loadingTicket.value = true;
  openTicketInfo.value = true;
  setTimeout(async () => {
    try {
      const res: any = await getTicketInfoApi();
      if (res.status == HTTP_STATUS.SUCCESS) {
        ticketInfo.value = res.data;
      }
    } catch (error) {
    } finally {
      loadingTicket.value = false;
    }
  });
}
</script>

<style lang="scss" scoped>
#user-box {
  height: 10%;
  border-bottom: 1px;

  display: flex;
  justify-content: flex-end;
  align-items: center;

  //   box-shadow: 0 5px 15px -3px rgba(0,0,0,.2),0 2px 6px -4px rgba(0,0,0,.15);
  box-shadow: rgba(34, 34, 34, 0.07) 0px 4px 15px;

  .hollow {
    margin-right: 1200px;
    font-size: 30px;
    background: linear-gradient(to right, red, blue);
    background-clip: text;
    color: transparent;
    user-select: none;
  }

  svg + span {
    margin-right: 50px;
    user-select: none;
    font-size: large;
    font-weight: 900;
    &:hover {
      cursor: pointer;
      text-decoration: underline;
      color: grey;
    }
  }

  #user-info {
    height: inherit;
    margin-top: 5px;
    display: flex;
    align-items: center;
  }

  #user-text {
    display: inline-block;
    font-weight: bold;
    font-size: medium;
    user-select: none;
    cursor: pointer;
    margin-right: 30px;

    #user-name {
      display: inline-block;
      width: 60px;
      overflow: hidden;
      text-wrap: nowrap;
    }
  }

  #not-login {
    height: 35px;
    vertical-align: middle;
    margin-right: 25px;
  }
}
</style>
